<template>
  <div class="box">
    <div class="box_title">
      <div class="search_item flex">
        <div class="search_item_lf">区/县</div>
        <div class="search_item_lc overflowEllipsis">{{ area }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(1)">
        <div class="search_item_lf">街 道</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.streetStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(2)">
        <div class="search_item_lf">社 区</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.communityStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(3)">
        <div class="search_item_lf">网 格</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.gridStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_buxBox">
        <div class="search_button">查询</div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div class="echarts_title">───&nbsp;&nbsp;&nbsp;&nbsp;志愿者统计&nbsp;&nbsp;&nbsp;&nbsp;───</div>
        <div class="echarts_main">
          <div id="zhiyuanzheMap"></div>
        </div>
      </div>
      <div class="box_main_bingEch">
        <div class="echarts_title">───&nbsp;&nbsp;&nbsp;&nbsp;性别统计&nbsp;&nbsp;&nbsp;&nbsp;───</div>
        <div class="box_main_bingEch_main">
          <div class="box_main_bingEch_main_l">
            <div class="box_main_bingEch_main_t">
              <i class="icon iconfont icon-bianji"></i>{{xingbietongjiLists[0].value == 0 ? 0 :
              xingbietongjiLists[0].value*1 / numSize * 100}}%
            </div>
            <div class="box_main_bingEch_main_b ">
              男性：<small class="overflowEllipsis">{{xingbietongjiLists[0].value}}</small>
            </div>
          </div>
          <div class="box_main_bingEch_main_c">
            <div id="xingbietongji"></div>
          </div>
          <div class="box_main_bingEch_main_r">
            <div class="box_main_bingEch_main_t">
              <i class="icon iconfont icon-bianji box_main_bingEch_main_bn"></i>{{xingbietongjiLists[1].value == 0 ? 0
              : xingbietongjiLists[1].value*1 / numSize * 100}}%
            </div>
            <div class="box_main_bingEch_main_b box_main_bingEch_main_bn">
              女性：<small class="overflowEllipsis">{{xingbietongjiLists[1].value}}</small>
            </div>
          </div>
        </div>
      </div>
      <div class="box_main_echarts">
        <div class="echarts_title">───&nbsp;&nbsp;&nbsp;&nbsp;志愿项目统计&nbsp;&nbsp;&nbsp;&nbsp;───</div>
        <div class="echarts_main">
          <div id="zhiyuanxiangmuMap"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let echarts = require("echarts");
  import taskApi from "../../requestApi/taskApi";
  import dateModel from "../../components/Module/dateModel";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {
      dateModel
    },
    data() {
      return {
        numSize: 0,
        area: "宝塔区",
        Query: {
          street: null,
          streetStr: "- -",
          community: null,
          communityStr: "- -",
          grid: null,
          gridStr: "- -",
          year: 2018
        },
        xingbietongjiColorLists: ["#FF4248", "#4294D9"],
        xingbietongjiLists: [{
            value: 1,
            name: "延期项目",
            color: "#4294D9"
          },
          {
            value: 3,
            name: "预警项目",
            color: "#FF4248"
          }
        ],
        zyxmYLists: [],
        zyzYLists: [],
        XLists: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
      };
    },
    created: function () {},
    mounted() {
      this.titleFun({
        title: "志愿统计"
      });
      let self = this;
      // let u = navigator.userAgent;
      // let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      // if (isAndroid) {
      //   if (window.BenchJSInterface) {
      //     if (window.BenchJSInterface.setRightImage) {
      //       // 0 不设置右上角  1 选择年  2 选择组织机构
      //       // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //       // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      //       let obj = {
      //         clickType: 1,
      //       };
      //       window.BenchJSInterface.setRightImage(
      //         JSON.stringify(obj),
      //         `javascript:window.getAppRightzhiyuanzhetongji(->path<-);`
      //       );
      //     }
      //   }
      // }
      if (window.BenchJSInterface) {
        if (window.BenchJSInterface.setRightImage) {
          // 0 不设置右上角  1 选择年  2 选择组织机构
          // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
          // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
          let obj = {
            clickType: 1,
          };
          window.BenchJSInterface.setRightImage(
            JSON.stringify(obj),
            `javascript:window.getAppRightzhiyuanzhetongji(->path<-);`
          );
        }
      }
      window.getAppRightzhiyuanzhetongji = function (val) {
        self.Query.year = val
        self.listFun();
      };
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listFun();
      };
    },
    methods: {
      // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //  * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      streetClick(index) {
        let self = this;
        let obj = {
          type: index,
          chooseType: index
        };
        self.baseUserchooseOrgFun(JSON.stringify(obj), "getStreetClick");
        window.getStreetClick = function (val) {
          let obj = self.basechooseOrgInfoFun(val);
          if (index == 1) {
            self.Query.street = obj.orgId;
            self.Query.streetStr = obj.orgName;
            self.Query.community = null;
            self.Query.communityStr = '- -';
            self.Query.grid = null;
            self.Query.gridStr = '- -';
          } else if (index == 2) {
            self.Query.community = obj.orgId;
            self.Query.communityStr = obj.orgName;
            self.Query.grid = null;
            self.Query.gridStr = '- -';
          } else if (index == 3) {
            self.Query.grid = obj.orgId;
            self.Query.gridStr = obj.orgName;
          }
        };
      },
      zyzMapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(
          document.getElementById("zhiyuanzheMap")
        );
        eComVisitChart.setOption({
          xAxis: {
            name: "月",
            color: "#2A70DA",
            type: "category",
            data: self.XLists,
            boundaryGap: false,
            axisLabel: {
              interval: 0,
              rotate: -50
            },
            nameTextStyle: {
              color: "#2A70DA",
              padding: [0, 0, -70, -18] // 坐标轴名称相对位置
            },
            axisLine: {
              name: "月",
              // 坐标轴 轴线
              show: true, // 是否显示
              symbol: ["none", "arrow"], // 是否显示轴线箭头
              symbolSize: [6, 8], // 箭头大小
              symbolOffset: [0, 6], // 箭头位置
              // ------   线 ---------
              lineStyle: {
                color: "#2A70DA",
                width: 1,
                type: "solid"
              }
            }
          },
          yAxis: {
            name: "(人数)",
            type: "value"
          },
          series: [{
            itemStyle: {
              normal: {
                color: "#F74A4F",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#F74A4F"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            },
            silent: true,
            smooth: true,
            data: self.zyzYLists,
            type: "line"
          }]
        });
      },
      zyxmMapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(
          document.getElementById("zhiyuanxiangmuMap")
        );
        eComVisitChart.setOption({
          xAxis: {
            name: "月",
            color: "#2A70DA",
            type: "category",
            data: self.XLists,
            boundaryGap: false,
            axisLabel: {
              interval: 0,
              rotate: -50
            },
            nameTextStyle: {
              color: "#2A70DA",
              padding: [0, 0, -70, -18] // 坐标轴名称相对位置
            },
            axisLine: {
              name: "月",
              // 坐标轴 轴线
              show: true, // 是否显示
              symbol: ["none", "arrow"], // 是否显示轴线箭头
              symbolSize: [6, 8], // 箭头大小
              symbolOffset: [0, 6], // 箭头位置
              // ------   线 ---------
              lineStyle: {
                color: "#2A70DA",
                width: 1,
                type: "solid"
              }
            }
          },
          yAxis: {
            name: "(人数)",
            type: "value"
          },
          series: [{
            itemStyle: {
              normal: {
                color: "#4294D9",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#4294D9"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            },
            silent: true,
            smooth: true,
            data: self.zyxmYLists,
            type: "line"
          }]
        });
      },
      xingbiemapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(
          document.getElementById("xingbietongji")
        );
        eComVisitChart.setOption({
          series: [{
            type: "pie",
            radius: [20, 40],
            avoidLabelOverlap: false,
            label: {},
            labelLine: {
              normal: {
                show: false
              }
            },
            silent: true,
            color: self.xingbietongjiColorLists,
            data: self.xingbietongjiLists
          }]
        });
      },
      async listFun() {
        let self = this;
        let params = {
          url: `year=${self.Query.year}&street=${
          self.Query.streetStr == "- -" ? "" : self.Query.street
        }&community=${
          self.Query.communityStr == "- -" ? "" : self.Query.community
        }&grid=${self.Query.gridStr == "- -" ? "" : self.Query.grid}`
        };
        let res = await taskApi.GetApistatisticsvolunteerstatistics(params);
        if (res.statusCode == 200) {
          self.xingbietongjiLists = [{
              value: res.data.femaleNum || 0,
              name: "女",
              color: "#4294D9"
            },
            {
              value: res.data.maleNum || 0,
              name: "男",
              color: "#FF4248"
            }
          ];
          self.numSize =
            self.xingbietongjiLists[0].value * 1 +
            self.xingbietongjiLists[1].value * 1;
          let volunteerList = [];
          let projectlist = [];
          for (let index = 1; index < 13; index++) {
            volunteerList.push({
              key: index,
              value: 0
            });
            projectlist.push({
              key: index,
              value: 0
            });
          }
          let volunteer = res.data.volunteer;
          volunteerList.forEach(e => {
            for (let k in volunteer) {
              if (e.key == k) {
                e.value = volunteer[k];
              }
            }
          });
          self.zyzYLists = volunteerList.map(e => {
            return e.value;
          });
          let project = res.data.project;
          projectlist.forEach(e => {
            for (let k in project) {
              if (e.key == k) {
                e.value = project[k];
              }
            }
          });
          self.zyxmYLists = projectlist.map(e => {
            return e.value;
          });
          this.xingbiemapListsFun();
          this.zyxmMapListsFun();
          this.zyzMapListsFun();
        } else {
          self.xingbietongjiLists = [{
              value: 0,
              name: "女",
              color: "#4294D9"
            },
            {
              value: 0,
              name: "男",
              color: "#FF4248"
            }
          ];
          self.numSize =
            self.xingbietongjiLists[0].value * 1 +
            self.xingbietongjiLists[1].value * 1;
          this.xingbiemapListsFun();
          this.zyxmMapListsFun();
          this.zyzMapListsFun();
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  #zhiyuanzheMap {
    width: calc(100% - 0.2667rem);
    height: 260px;
    overflow: hidden;
  }

  #zhiyuanxiangmuMap {
    width: calc(100% - 20px);
    height: 260px;
    overflow: hidden;
  }

  /* 筛选 */
  .search_button {
    width: 2.5067rem;
    height: 0.9333rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.0533rem;
    font-size: 0.4rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(224, 38, 43, 1);
    line-height: 0.9333rem;
    text-align: center;
    margin-top: 0.72rem;
  }

  .search_buxBox {
    height: 0.96rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .search_item_lf {
    width: 1.6533rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    font-size: 0.3467rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
  }

  .search_item_lc {
    height: 1.0667rem;
    line-height: 1.0667rem;
    width: calc(100% - 1.6533rem - 0.9333rem - 0.2667rem);
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  .search_item_lr {
    width: 0.9333rem;
    height: 1.0667rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search_item_lr i {
    font-size: 0.32rem;
    color: #fff;
  }

  .search_item {
    width: calc(100% - 1.0667rem);
    margin-left: 0.5333rem;
    height: 1.0667rem;
    background: rgba(236, 242, 245, 0.28);
    border-radius: 0.0533rem;
    margin-top: 0.4rem;
  }

  .box_title {
    width: 100%;
    height: 8.2667rem;
    overflow: hidden;
    background-color: #ff4248;
  }

  /* 筛选 */
  .echarts_title {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(163, 163, 163, 1);
  }

  .box_main_list_item_type {
    width: 0.3467rem;
    height: 0.3467rem;
    background: rgba(223, 184, 133, 1);
    margin-top: 0.08rem;
    margin-right: 0.32rem;
  }

  .box_main_list_item_txt {
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item {
    width: 100%;
    height: 0.4rem;
    margin-left: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
    margin-top: 0.4267rem;
  }

  .box_main_listUl {
    display: flex;
    flex-wrap: wrap;
  }

  .box_main_list {
    min-height: 1.2rem;
    width: 100%;
    margin-top: 0.1333rem;
  }

  /* 图表 */
  .box_main_bingEch_main_t {
    font-size: 0.7467rem;
    font-family: PingFang-SC-Heavy;
    font-weight: 800;
    color: rgba(71, 70, 70, 1);
    height: 0.8267rem;
    line-height: 0.8267rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2667rem;
  }

  .box_main_bingEch_main_t i {
    color: #4294d9;
    font-size: 0.4rem;
    margin-right: 0.1333rem;
  }

  .box_main_bingEch_main_b small {
    color: #4294d9;
    font-size: 0.4267rem;
    width: 1.6rem;
  }

  .box_main_bingEch_main_bn i {
    color: #ff4248 !important;
  }

  .box_main_bingEch_main_bn {
    color: #ff4248 !important;
  }

  .box_main_bingEch_main_b {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.3467rem;
    color: #474646;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-top: 0.3733rem;
    overflow: hidden;
    width: 100%;
  }

  .box_main_bingEch_main_l {
    width: calc(50vw - 1.8667rem);
    height: 2.1867rem;
    margin-right: 0.3733rem;
    margin-left: 0.2667rem;
  }

  .box_main_bingEch_main_c {
    min-width: 2.1867rem;
    height: 2.1867rem;
  }

  .box_main_bingEch_main_r {
    width: calc(50vw - 1.8667rem);
    height: 2.1867rem;
    margin-left: 0.3733rem;
    margin-right: 0.2667rem;
  }

  .box_main_bingEch_main {
    height: 120px;
    width: calc(100%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .echarts_main {
    height: 260px;
    width: calc(100% - 0.8rem);
    margin-left: 0.4rem;
    overflow: hidden;
  }

  #main_map {
    width: 100%;
    height: 260px;
    overflow: hidden;
  }

  .box_main_bingEch {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    border: 0.0267rem solid #ccc;
    box-shadow: 0rem 0.0533rem 0.32rem 0rem rgba(0, 0, 0, 0.09);
    border-radius: 0.0533rem;
    margin-bottom: 0.3733rem;
    background-color: #fff;
  }

  .box_main_echarts {
    width: 100%;
    height: 338px;
    overflow: hidden;
    position: relative;
    border: 0.0267rem solid #ccc;
    box-shadow: 0rem 0.0533rem 0.32rem 0rem rgba(0, 0, 0, 0.09);
    border-radius: 0.0533rem;
    background-color: #fff;
    margin-bottom: 0.3733rem;
  }

  /* 图表 */
  .box_main_bd {
    width: calc(100% - 0.5333rem);
    margin-left: 0.2667rem;
    min-height: 315px;
    overflow: hidden;
    margin-bottom: 0.6667rem;
  }

  .box {
    background: #eff1f3;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    /* background: url("/static/img/数据支撑.jpg") no-repeat;
  background-size: 100% auto; */
  }

  #xingbietongji {
    width: 82px;
    height: 82px;
    overflow: hidden;
  }

</style>
